<template>
  <!--获取路由参数-->
  <ItemMusicTop :playlist="state.itemList"/>
  <ItemMusicList :toPlay="state.toPlay" :subscribed="state.itemList.subscribedCount"/>
</template>

<script>
import {useRoute} from "vue-router";
import {onMounted, reactive} from "vue";
import {getMusicsList,getMusicItemToPlay} from "@/components/request/api/item";
import ItemMusicTop from "@/components/item/ItemMusicTop.vue";
import ItemMusicList from "@/components/item/ItemMusicList.vue";
export default {
  name: "ItemMusic",
  components: {ItemMusicList, ItemMusicTop},
  setup(){
    const state=reactive({
      itemList:{},
      toPlay:{},
    })
    onMounted(async ()=>{
      let id=useRoute().query.id
      let res=await getMusicsList(id)

      state.itemList=res.data.playlist
      let result=await getMusicItemToPlay(id)//播放列表
      const  song=result.data.songs
      state.toPlay=song
      console.log(state.itemList);
      console.log(state.toPlay);
    });
    return{state}
  },
  props:{

  }
}
</script>

<style scoped>

</style>
